<template>
	<view class="wrap">
		<view class="head">
			<image class="img" src="/static/activityList/left.png" mode=""></image>
			<view class="haedName">
				活动详情
			</view>
			<image class="img" src="/static/activityList/share.png" mode="" @click="shareModel = true"></image>
		</view>
		<view class="content">
			<view class="title">
				【辽宁大学云征集】欢迎分享你珍藏的辽大
			</view>
			<view class="school">
				<image src="/static/activityList/logo.png" class="school_img" mode=""></image>
				<view class="school_right">
					<view class="school_title">
						辽宁大学校友会
					</view>
					<view class="school_text">
						2023-07-08 09:07
					</view>
				</view>
			</view>
			<view class="list">
				<!-- 				<custom-waterfalls-flow :value="list">
					<template v-slot:default="item">
						<view class="item">
							<view class="num">
								<image class="img" src="@/static/post/heart_red.png" mode=""></image>
								{{item.num}}
							</view>
						</view>
					</template>
				</custom-waterfalls-flow> -->
			</view>
			<view class="below" @click="reset">
				加载更多
				<!-- <image src="@/static/post/below.png" mode=""></image> -->
			</view>
		</view>
		<view class="footer">
			<view class="btn">
				上传照片
			</view>
		</view>
		<Share @close="shareClose" :model='shareModel' :barHidth='242'></Share>
	</view>
</template>

<script>


</script>

<style lang="scss">
	.head {
		width: 100vw;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 0;
		left: 0;
		padding-right: 32rpx;
		box-sizing: border-box;
		font-size: 36rpx;
		color: #353535;
		background: #fff;
		z-index: 111;

		.img {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.content {
		padding: 88rpx 0 180rpx 0;

		.title {
			font-size: 32rpx;
			padding: 20rpx;
			box-sizing: border-box;
		}

		.school {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 20rpx solid #F6F6F6;

			.school_img {
				width: 88rpx;
				height: 88rpx;
			}

			.school_right {
				flex: 1;
				padding-left: 20rpx;

				.school_title {
					font-size: 28rpx;
				}

				.school_text {
					font-size: 24rpx;
					color: #666666;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.price {
					color: #275BA8
				}
			}
		}

		.list {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;

			.item {
				position: relative;
			}

			.num {
				position: absolute;
				bottom: 30rpx;
				right: 30rpx;
				line-height: 56rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #fff;

				.img {
					width: 46rpx;
					height: 46rpx;
				}
			}
		}

		.below {
			font-size: 28rpx;
			color: #275BA8;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.footer {
		height: 160rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(140, 140, 140, 0.302);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.btn {
			width: 710rpx;
			height: 80rpx;
			// background: url(/static/post/btn.png);
			background-size: 100% 100%;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
		}
	}
</style>